<script setup>
import {getCategoryServe} from "@/api/catalog"
import {ref} from "vue"

const categorys = ref([]);
const getCategorys = async ()=>{
  let result = await getCategoryServe();
  if(result.status === 1){
    // console.log(result.data)
    categorys.value = result.data;
    // alert("登录成功！");
    // localStorage.setItem("token", result.data.token);
  }else{
    alert("失败");
  }
}
getCategorys();
</script>

<template>
    <el-main>
    <div class="container">
      <div class="left">
        <el-row class="tac" style="width: 100%;">
          <el-col :span="24">
            <h1 class="mb-2" style="color:#146e34">Goods</h1>
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-menu-item index="2" v-for="category in categorys" :key="category" style="background-color: #eeeeef;border-bottom: 1px solid #ffffff">
                <router-link :to="{path: '/categoryForm', query: { category: category.catid }}" style="text-decoration: none">
                  <span style="font-size: 22px;color: #333333;font-weight: bold">{{category.catid}}</span>
                </router-link>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="right" style="width: 80%;">
        <div class="block text-center" style="margin-left: 5%;margin-bottom: 3%;margin-top: 3%">
          <el-carousel :interval="4000" height="500px" type="card" >
            <el-carousel-item v-for="category in categorys" :key="category">
              <router-link :to="{path: '/categoryForm', query: { category: category.catid }}">
                <img :src="category.mainimg" style="object-fit: cover;">
              </router-link>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    </el-main>
</template>

<style scoped>
.container {
  display: flex;
}

.left {
  width: 20%;
}

.right {
  width: 80%;
}
img {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>